var __layoutConfig={
	//加载布局之后再显示布局，否则可能会显示布局前的布局
	afterLoadedShow:true,
	//加载布局(Vue)前对应dom元素的样式(当afterLoadedShow为true时生效)
	registerCSS:`
		hiv{display:none;}
		viv{display:none;}
		rhiv{display:none;}
		rviv{display:none;}
		block{display:none;}
		pow{display:none;}
		wiv{display:none;}
		rwiv{display:none;}
		._hiv>._pow{
			height:0% !important;
		}
		._rhiv>._pow{
			height:0% !important;
		}
		._viv>._pow{
			width:0% !important;
		}
		._rviv>._pow{
			width:0% !important;
		}
		/*._hiv>._block{
			height:0% !important;
		}
		._rhiv>._block{
			height:0% !important;
		}
		._viv>._block{
			width:0% !important;
		}
		._rviv>._block{
			height:0% !important;
		}*/
	`,
	version:'V1.13-sp'
};
var __flexMapper = {
	"start":"flex-start",
	"end":"flex-end",
	"center":"center",
	"evenly":"space-evenly",
	"around":"space-around",
	"between":"space-between"
}
function __getOrDefault(mapper,value){
	if(mapper[value]==null)
		return value;
	else return mapper[value];
}
function __getWrap(wrap,rwrap){
	if(wrap)
		return 'wrap';
	else if(rwrap)
		return 'wrap-reverse';
	else 'nowrap';
}
function __initLayoutSetting(config){
	if(__layoutConfig.afterLoadedShow){
		var style=`<style>${__layoutConfig.registerCSS}</style>`;
		var ele=document.createElement('div');
		ele.innerHTML=style;
		document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
	}
	//注册全局组件
	//vmode和hmode属性:start end evenly around between
	Vue.component('hiv', {
		template: `
		<div :style='{display: display,"flex-direction": direction,"flex-wrap":__getWrap(wrap,rwrap),"justify-content":__getOrDefault(__flexMapper,hmode),"align-items":__getOrDefault(__flexMapper,vmode),"align-content":__getOrDefault(__flexMapper,wmode)}' class='_hiv'>
			<slot></slot>
		</div>
		`,
		props: {
			hmode: {
				type: String,
				default: ''
			},
			vmode: {
				type: String,
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			rwrap: {
				type: Boolean,
				default: false
			},
			wmode:{
				type:String,
				default: ''
			}
		},
		data: function() {
			return {
				display: 'flex',
				direction: 'row',
			}
		}
	});
	Vue.component('viv', {
		template: `
			<div :style='{display: display,"flex-direction": direction,"flex-wrap":__getWrap(wrap,rwrap),"justify-content":__getOrDefault(__flexMapper,hmode),"align-items":__getOrDefault(__flexMapper,vmode),"align-content":__getOrDefault(__flexMapper,wmode)}' class='_viv'>
				<slot></slot>
			</div>
		`,
		props: {
			hmode: {
				type: String,
				default: ''
			},
			vmode: {
				type: String,
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			rwrap: {
				type: Boolean,
				default: false
			},
			wmode:{
				type:String,
				default: 'flex-start'
			}
		},
		data: function() {
			return {
				display: 'flex',
				direction: 'column',
			}
		}
	});
	Vue.component('rhiv', {
		template: `
		<div :style='{display: display,"flex-direction": direction,"flex-wrap":__getWrap(wrap,rwrap),"justify-content":__getOrDefault(__flexMapper,hmode),"align-items":__getOrDefault(__flexMapper,vmode),"align-content":__getOrDefault(__flexMapper,wmode)}' class='_rhiv'>
			<slot></slot>
		</div>
		`,
		props: {
			hmode: {
				type: String,
				default: ''
			},
			vmode: {
				type: String,
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			rwrap: {
				type: Boolean,
				default: false
			},
			wmode:{
				type:String,
				default: ''
			}
		},
		data: function() {
			return {
				display: 'flex',
				direction: 'row-reverse',
			}
		}
	});
	Vue.component('rviv', {
		template: `
		<div :style='{display: display,"flex-direction": direction,"flex-wrap":__getWrap(wrap,rwrap),"justify-content":__getOrDefault(__flexMapper,hmode),"align-items":__getOrDefault(__flexMapper,vmode),"align-content":__getOrDefault(__flexMapper,wmode)}' class='_rviv'>
			<slot></slot>
		</div>
		`,
		props: {
			hmode: {
				type: String,
				default: ''
			},
			vmode: {
				type: String,
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			rwrap: {
				type: Boolean,
				default: false
			},
			wmode:{
				type:String,
				default: ''
			}
		},
		data: function() {
			return {
				display: 'flex',
				direction: 'column-reverse',
			}
		}
	});
	//不支持block和pow
	Vue.component('wiv', {
		template: "<div :style='{display: display,\"flex-direction\":direction,\"flex-wrap\":wrap,\"justify-content\":__getOrDefault(__flexMapper,hmode),\"align-content\":__getOrDefault(__flexMapper,vmode)}' class='_wiv'><slot></slot></div>",
		props: {
			hmode: {
				type: String,
				default: 'space-between'
			},
			vmode: {
				type: String,
				default: 'space-between'
			},
			direction: {
				type: String,
				default: 'row'
			}
		},
		data: function() {
			return {
				display: 'flex',
				wrap: 'wrap'
	
			}
		}
	
	});
	Vue.component('rwiv', {
		template: "<div :style='{display: display,\"flex-direction\":direction,\"flex-wrap\":wrap,\"justify-content\":__getOrDefault(__flexMapper,hmode),\"align-content\":__getOrDefault(__flexMapper,vmode)}' class='_wiv'><slot></slot></div>",
		props: {
			hmode: {
				type: String,
				default: 'space-between'
			},
			vmode: {
				type: String,
				default: 'space-between'
			},
			direction: {
				type: String,
				default: 'row'
			}
		},
		data: function() {
			return {
				display: 'flex',
				wrap: 'wrap-reverse',
			}
		}
	});
	
	
	Vue.component('pow', {
		template: "<div ref='pow' class='_pow' :style=\"{width:'100%',height:'100%','flex':this.flex}\"><slot></slot></div>",
		props: {
			flex: {
				type: String,
				default: '1.0'
			}
		},
		data: function() {
			return {
				run: false
			}
		}
	
	
	})
	Vue.component('block', {
		template: "<div ref='block' class='_block' style='flex-shrink:0;'><slot></slot></div>",
		props: {
			length: {
				type: String,
				default: null
			},
	
		},
		watch:{
			length:{
				handler(){
					this.refreshWidth();
				},
				immediate:true
			},
			
		},
		mounted(){
			this.refreshWidth();
		},
		methods:{
			refreshWidth(){
				if(this.length==null)return;
				this.$nextTick(function(){
					if (this.$parent.$el.style.flexDirection=='row') {
						this.$refs.block.style.width = this.length;
					} else if (this.$parent.$el.style.flexDirection=='column') {
						this.$refs.block.style.height = this.length;
					}
				})
				
			}
		}
		
	})
}
__initLayoutSetting(__layoutConfig);

